<template>
  <Card :bordered="false" dis-hover class="ivu-mt">
    <div>
      <Button
        type="primary"
        v-hasC="{
          name: 'v1-patient-share-create',
          flag: 'v1/patient/share/create',
        }"
        @click="haddleAdd"
        >新增</Button
      >
    </div>
    <Table
      :columns="columns"
      :data="data"
      :loading="loading"
      class="ivu-mt-16"
      :max-height="650"
    >
      <template slot="share_status_str" slot-scope="{ row }">
        <Tag :color="+row.share_status == 2 ? 'default' : 'primary'">{{
          row.share_status_str
        }}</Tag>
      </template>
      <template slot="action" slot-scope="{ row }">
        <a
          @click="haddleDetail(row)"
          v-hasC="{
            name: 'v1-patient-share-info',
            flag: 'v1/patient/share/info',
          }"
          >详细</a
        >
        <Divider type="vertical" />
        <span v-if="+row.share_status == 1">
          <a
            @click="cancelShare(row)"
            v-hasC="{
              name: 'v1-patient-share-cancel',
              flag: 'v1/patient/share/cancel',
            }"
            style="color: red;"
            >取消共享</a
          >
        </span>
      </template>
    </Table>

    <Page
      :total="total"
      class="ivu-mt-16"
      :modelValue="params.page"
      :page-size="params.pageSize"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
    />
    <detail ref="detail" />
    <add ref="add" @refresh="refresh" />
  </Card>
</template>
<script>
import detail from "./detail";
import add from "./add";
import { shareList, shareCancel } from "@/api/datashare";
export default {
  name: "datashare",
  components: { detail, add },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "名称",
          key: "name",
        },
        {
          title: "原项目",
          key: "select_project_name",
        },
        {
          title: "目标项目",
          key: "target_project_name",
        },
        {
          title: "数据",
          key: "patient_num",
        },
        {
          title: "状态",
          slot: "share_status_str",
        },
        {
          title: "操作日期",
          key: "operation_time",
          width: 160,
        },
        {
          title: "操作人",
          key: "operation_name",
          width: 120,
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 140,
        },
      ],
      data: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      shareList(this.params)
        .then((res) => {
          this.total = res.total;
          this.data = res.list;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    refresh() {
      this.params.page = 1;
      this.getData();
    },
    formSize(e) {
      this.params.page = e;
      this.getData();
    },
    formChangePage(e) {
      this.params.pageSize = e;
      this.getData();
    },
    haddleAdd() {
      this.$refs.add.init();
    },
    haddleDetail(row) {
      this.$refs.detail.init(row.id);
    },
    cancelShare(row) {
      this.$Modal.confirm({
        title: "取消共享",
        content: "<p>取消共享后数据将返回原项目，已到诊数据不会返回</p>",
        loading: true,
        onOk: () => {
          shareCancel({ id: row.id })
            .then(() => {
              this.getData();
              this.$Modal.remove();
            })
            .catch(() => {
              this.$Modal.remove();
            });
        },
      });
    },
  },
};
</script>
